<template>
  <div class="publish">
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="公告标讯">
          <!-- 下拉框 -->
          <div style="margin: 20px 0">
            <el-select
              v-model="value"
              multiple
              placeholder="公告类型"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="所属行业"
              style="width: 220px; margin: 0 10px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="收藏日期"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button class="ml10 btn">查询</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
            stripe
            style="width: 100%"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column
              label="公告类型"
              property="bx_price"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              property="title"
              label="标题信息"
              width="700"
              align="center"
            />

            <el-table-column property="bx_price" label="金额" align="center" />

            <el-table-column
              property="createtime"
              label="发布时间"
              width="120"
              align="center"
              :formatter="gridDateFormatter"
            />

            <el-table-column
              property="releasetime"
              label="收藏日期"
              width="120"
              align="center"
              :formatter="gridDateFormatter"
            >
            </el-table-column>

            <el-table-column
              property="is_del"
              label="所属行业"
              width="100"
              align="center"
            >
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" align="center">
              <template v-slot="scope">
                <el-button type="text" @click="handleClick(scope.row.id)">
                  取消收藏
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业公司">
          <!-- 下拉框 -->
          <div style="margin: 20px 0">
            <el-select
              v-model="value"
              multiple
              placeholder="公告类型"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="所属行业"
              style="width: 220px; margin: 0 10px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select
              v-model="value"
              multiple
              placeholder="收藏日期"
              style="width: 220px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button class="ml10 btn">查询</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
            stripe
            style="width: 100%"
          >
            <el-table-column type="selection" width="40" />
            <el-table-column
              property="bx_price"
              label="公告名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              property="title"
              label="经营范围"
              align="center"
              width="700"
            />

            <el-table-column
              property="clientid"
              label="公司法人"
              align="center"
            >
            </el-table-column>

            <el-table-column
              property="releasetime"
              label="收藏日期"
              align="center"
              :formatter="gridDateFormatter"
            >
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" align="center">
              <template v-slot="scope">
                <el-button
                  link
                  type="primary"
                  @click="handleClick(scope.row.id)"
                  >
                  取消收藏
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { decrypt } from "@/utils/index";
import { reactive, ref, onMounted } from "vue";
import { ElTable } from "element-plus";
import "../../../../../assets/com/com.scss";
import { CollectList, CollectCancel } from "../../../../../Api/collect/index";
import { ElMessage } from "element-plus";
import {userInfo} from '@/Api/api.js'
// 下拉
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },

  {
    value: "Option2",
    label: "Option2",
  },
];

interface User {
  date: string;
  name: string;
  address: string;
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const tableData = ref([]);
const tableData1 = ref([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
// 取消收藏
const tokens = localStorage.getItem("token")

let clientid
if(tokens){
  userInfo().then(rex=>{
    clientid = rex.data.data.clientid
  })
}
const handleClick = (nid) => {
  CollectCancel({ clientid, nid }).then((res) => {
    console.log(res);
    if (res.data.code !== 1) {
      ElMessage.error(res.data.msg);
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    }
  });
};

// 日期转换
const gridDateFormatter = (row, column, cellValue, index) => {
  const dateTimestamp = row[column.property];
  const date = new Date(dateTimestamp * 1000);
  const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
    .getHours()
    .toString()
    .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date
    .getSeconds()
    .toString()
    .padStart(2, "0")}`;
  return formattedDate;
};

onMounted(() => {
  CollectList().then((res) => {
    // console.log(res);
    tableData.value = res.data.data.list;
  });
});
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #fff;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #000;
}

:deep(.el-tabs__nav) {
  border-top: 2px solid #fff;
}

:deep(
    [data-v-b30d4aeb]
      .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item.is-active
  ) {
  border-top: 3px solid #f43107;
}

:deep(el-tabs__item is-top) {
  border-top: 2px solid red;
}

.publish {
  // height: 940px;
  // height: calc(100vh - 150px);
  padding: 20px;
  background-color: #fff;
}

// 下拉
:deep(.el-select__wrapper) {
  height: 36px;
}

.btn {
  width: 90px;
  height: 36px;
  background: #f43107;
  border-radius: 4px;
  border: 0;
  color: #fff;
}
</style>
